<!--  -->
<template>
  <el-form :model="dataForm"
           :label-position="labelPosition"
           ref="dataForm"
           :label-width="`${labelWidth}px`">
    <template v-for="(scriptItem,i) in showJson"
              :label="scriptItem.label">
      <el-form-item :key="i"
                    v-if="scriptItem.type === 'switch'">
        <el-switch v-model="dataForm[scriptItem.text]"
                   :active-text="scriptItem.label"
                   :disabled="scriptItem.disabled">
        </el-switch>
      </el-form-item>
      <el-form-item :key="i"
                    :label="scriptItem.label"
                    v-else-if="scriptItem.type === 'text'">
        <el-input v-model="dataForm[scriptItem.text]"
                  :counter="scriptItem.counter"
                  :rules="scriptItem.rules"
                  :label="scriptItem.label"
                  persistent-hint
                  :placeholder="scriptItem.hint"
                  required></el-input>
      </el-form-item>
      <el-form-item :key="i"
                    :label="scriptItem.label"
                    v-else-if="scriptItem.type === 'textarea'">
        <quill-editor style="padding: 10px 0;"
                      :name="scriptItem.id"
                      ref="myTextEditor"
                      :hint="scriptItem.hint"
                      :placeholder="scriptItem.placeholder"
                      :label="scriptItem.label"
                      v-model="dataForm[scriptItem.text]"
                      :options="editorOption"></quill-editor>
        <el-tooltip :open-delay="1000" class="item"
                    effect="dark"
                    :content="$t('custom.bots.load_default_tips')"
                    placement="top">
          <el-button type="text"
                     @click="loadDefault(scriptItem.text)">{{ $t('custom.bots.load_default') }}</el-button>
        </el-tooltip>
      </el-form-item>
      <el-form-item :key="i"
                    :label="scriptItem.label"
                    v-else-if="scriptItem.type === 'select'">
        <div v-if="getSelectDataLists(scriptItem)"></div>
        <el-select v-model="dataForm[scriptItem.text]"
                   filterable
                   clearable
                   default-first-option>
          <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                     :key="ii"
                     :value="o[scriptItem.fieldValue]"
                     :label="o[scriptItem.fieldLabel]"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :key="i"
                            :label="scriptItem.label"
                            v-else-if="scriptItem.type === 'customized-select'">
                <div v-if="getSelectDataLists(scriptItem)"></div>
                <el-select v-model="dataForm[scriptItem.text]"
                           filterable
                           clearable
                           :placeholder="scriptItem.placeholder"
                           default-first-option>
                  <el-option v-for="its in scriptItem.selectList"
                         :key="its.value"
                         :label="its.label"
                         :value="its.value"></el-option>
                </el-select>
      </el-form-item>
      <el-form-item :key="i"
                    :label="scriptItem.label"
                    v-else-if="scriptItem.type === 'autocomplete'">
        <div v-if="getSelectDataLists(scriptItem)"></div>
        <el-select v-model="dataForm[scriptItem.text]"
                   filterable
                   clearable
                   multiple
                   collapse-tags
                   default-first-option>
          <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                     :key="ii"
                     :value="o[scriptItem.fieldValue]"
                     :label="o[scriptItem.fieldLabel]"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :key="i"
                            :label="scriptItem.label"
                            v-else-if="scriptItem.type === 'customized-autocomplete'">
                <div v-if="getSelectDataLists(scriptItem)"></div>
                <el-select v-model="dataForm[scriptItem.text]"
                           filterable
                           clearable
                           multiple
                           collapse-tags
                           :placeholder="scriptItem.placeholder"
                           default-first-option>
                  <el-option v-for="its in scriptItem.selectList"
                         :key="its.value"
                         :label="its.label"
                         :value="its.value"></el-option>
                </el-select>
              </el-form-item>
    </template>
  </el-form>
</template>

<script>
export default {
  props: {
    labelWidth: {
      type: Number,
      default: 120
    },
    labelPosition: {
      type: String,
      default: 'top'
    },
    blockInfo: {
      type: Object,
      default: () => { }
    },
    showJson: {
      type: Array,
      default: () => {
        return []
      }
    },
    dataForm: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      editorOption: {
        name: '232',
        modules: {
          toolbar: [
            ['code-block'],
            [{ 'direction': 'rtl' }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }],
            [{ 'background': [] }],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'font': ['sans-serif', 'monospace', 'serif'] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'align': [] }],
            ['link'],
            ['clean']
          ]
        },
        theme: 'snow',
        placeholder: ''
      },
      tempLoadDefault: { }
    }
  },
  created () {
    this.tempLoadDefault = this.blockInfo.paramsValue
  },
  methods: {
    loadDefault (text) {
      try {
        this.blockInfo.paramsValue[text] = this.blockInfo.sysParamsValue[text]
      } catch (error) {
        this.blockInfo.paramsValue[text] = this.tempLoadDefault[text]
      }
      // if (this.blockInfo.sysParamsValue[text]) {
      //   this.blockInfo.paramsValue[text] = this.blockInfo.sysParamsValue[text]
      // } else {
      //   this.blockInfo.paramsValue[text] = this.tempLoadDefault[text]
      // }
    },
    getSelectDataLists (item) {
      if (item.interfaceUrl && this.hasSelectData(item)) {
        return false
      }
      const url = item.interfaceUrl
      const params = {
        tenantCode: this.$store.state.user.tenantCode
      }
      this.$interface.clientReport.getBoardListForBotApi(url, params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.selectDataObj[`${item.text}ListsOrigin`] = res.data
          this.selectDataObj = Object.assign({}, this.selectDataObj)
          // Example:
          // {
          //   "fields": [
          //     {
          //        "text":"edwinTestSelect",
          //        "label":"Edwin Test",
          //        "type":"autocomplete",
          //        "defaultValue": null,
          //        "interfaceUrl": "/web/tasks/tennant_cw_board/findBoardList",
          //        "fieldLabel": "name",
          //        "fieldValue": "name"
          //     }
          //   ]
          // }
        }).catch(() => { })
    }
  }
}
</script>

<style scoped>
</style>
